<template>
  <view class="page-container">
    <public-loading></public-loading>
    <z-nav-bar id="nav" bgColor="#ffffff" title="团体管理"></z-nav-bar>
    <view class="title-btn-receptacle flex-center-between">
      <view class="flex">
        <view v-for="item in tabList" :key="item.value" class="item" :class="{ active: selectedTab === item.value }" @click="onTabChange(item.value)">
          {{ item.text }}
          <view v-if="selectedTab === item.value" class="black-line-vessel flex-j-center animated fadeIn faster">
            <view class="black-line"></view>
          </view>
        </view>
      </view>

    </view>
    <view class="content" v-if="selectedTab===1 ">
      <view class="card">
        <view class="card-item">
          <text class="label">团体卡状态</text>
          <view class="value-box">
            <text class="value">{{handleText(cardInfo.cardStatus)}}</text>
<!--            <text class="status">/通期/禁用</text>-->
          </view>
        </view>

        <view class="card-item store">
          <view class="store-name">{{cardInfo.storeShortName}}     <text class="phone">{{ stroreInfo.customerServicePhone }}</text></view>

          <text class="address">{{stroreInfo.storeLocation}}</text>
        </view>

        <view class="card-item">
          <text class="label">团体卡折扣</text>
          <text class="value">{{cardInfo.cardDiscount}}折</text>
        </view>

        <view class="card-item">
          <text class="label">授权额度</text>
          <text class="value">{{cardInfo.authorizedAmount}}</text>
        </view>

        <view class="card-item">
          <text class="label">可用额度</text>
          <text class="value">{{cardInfo.availableAmount}}</text>
        </view>

        <view class="card-item">
          <text class="label">已使用额度</text>
          <view class="value-box">
            <text class="value">{{cardInfo.usedAmount}}</text>
            <text class="link" @click="goJump(`/pagesMy/groupCard/consumptionDetails?id=${id}&groupCardNo=${cardInfo.groupCardNo}`)">消费明细</text>
          </view>
        </view>

        <view class="card-item">
          <text class="label">还款日期</text>
          <text class="value">每月{{cardInfo.repayAmountTime}}日</text>
        </view>

        <view class="card-item">
          <text class="label">待还金额</text>
          <view class="value-box">
            <text class="value">{{cardInfo.currentRepaymentAmount}}</text>
            <text class="link" @click="goJump(`/pagesMy/groupCard/repaymentList?id=${id}&groupCardNo=${cardInfo.groupCardNo}`)">还款记录</text>
          </view>
        </view>
      </view>
    </view>
    <MangeMan v-if="selectedTab===2"
              :cardInfo="cardInfo"
              @sendJump="sendJump"
              :personnelList="personnelList"
              @editJump="editJump"
              @handleDelete="handleDelete"
    ></MangeMan>
    <view class="bottom-btn-box">
      <main-button v-if="selectedTab===1" @click="payConfirm">还款</main-button>
      <main-button v-if="selectedTab===2" @click="addMember">添加成员</main-button>
    </view>
  </view>
</template>

<script setup lang="ts">
import MangeMan from "@/pagesMy/teamManagement/components/mangeMan.vue";
import {customerQryGroupCardById,customerQryGroupCardUser,customerPayGroupCardMoney,systemRelationDelete} from '@/api/pagesMy/user'
import {storeQryByStoreId} from '@/api/pagesMy/user'
import { onLoad } from '@dcloudio/uni-app';
import {setPlay} from '@/utils/common'
import { ref, reactive ,onMounted, onUnmounted} from 'vue'
const id = ref(0)
const tabTypeMap = {
  GROUP_CARD_DETAILS: 1,
  GROUP_CARD_PERSONNEL_MANAGEMENT: 2,
}
const cardInfo = ref({})
const personnelList= ref([])
let  stroreInfo =ref({})
const selectedTab = ref(tabTypeMap.GROUP_CARD_DETAILS)
const tabList = ref([
  { value: tabTypeMap.GROUP_CARD_DETAILS, text: '团体卡详情' },
  { value: tabTypeMap.GROUP_CARD_PERSONNEL_MANAGEMENT, text: '团体卡人员管理' }
])
const onTabChange = (val) => {
  if(val !== selectedTab.value) {
    selectedTab.value = val
  }
}
function handleText(lab:string){
  let label = ''
  switch (lab){
      case 'normal':
        label= '正常'
        break;
      case 'overdue':
        label= '逾期'
          break;
        case 'disabled':
          label= '禁用'
          break;
        case 'refunded':
          label= '退卡'
        break;

  }
  return label
}
function addMember(){
  uni.navigateTo({
    url: '/pagesMy/groupCard/addEdit?id='+id.value+"&groupCardNo="+ cardInfo.value.groupCardNo
  })
}
function sendJump(item){
  uni.navigateTo({
    url: '/pagesMy/groupCard/consumptionDetails?id='+id.value+"&groupCardNo="+ cardInfo.value.groupCardNo+'&payerId='+item.id
  })
}
function editJump(item){
  console.log('item',item)
  // groupManId 为人员编辑的id
  uni.navigateTo({
    url: '/pagesMy/groupCard/addEdit?id='+id.value +'&groupManId='+item.id+"&groupCardNo="+ cardInfo.value.groupCardNo+'&type=1'+'&userInfo='+JSON.stringify(item)
  })
}
function goJump(url){
  uni.navigateTo({
    url
  })
}
function payConfirm(){
  uni.navigateTo({
    url:'/pagesMy/groupCard/repayment?id='+id.value+"&groupCardNo="+ cardInfo.value.groupCardNo+'&repaymentAmount='+cardInfo.value.currentRepaymentAmount,
  })
  // customerPayGroupCardMoney({
  //   groupCardNo:cardInfo.value.groupCardNo,
  //   repaymentAmount:cardInfo.value.currentRepaymentAmount,
  //   paymentNotes:"团体卡还款",
  //   paymentMethod:"WX_PAY"
  // }).then(res=>{
  //   setPlay(res,()=>{
  //     uni.showToast({
  //       title: '还款成功',
  //       icon: 'none',
  //     })
  //     loadCustomerQryGroupCardById()
  //   })
  // })
}
function loadCustomerQryGroupCardById(){
  customerQryGroupCardById(id.value).then(res=>{
    cardInfo.value = res
    storeQryByStoreId(res.storeId).then(res=>{
      stroreInfo.value = res
    })
    customerQryGroupCardUser(cardInfo.value.groupCardNo).then(res=>{
      personnelList.value = res
    })
  })
}

const handleDelete =(e,callBack)=>{
  console.log('e',e)
  systemRelationDelete(e.item.id).then(res=>{
    uni.showToast({
      title: '删除成功',
      icon: 'none'
    })
    personnelList.value.splice(e.index,1)
    callBack&&callBack()
    // if()
  })
}
onLoad((options)=>{
   id.value = options.id
  loadCustomerQryGroupCardById()
})
onMounted(() => {
  uni.$on('refreshGroupCard', loadCustomerQryGroupCardById)
})
onUnmounted(() => {
  uni.$off('refreshGroupCard', loadCustomerQryGroupCardById)
})
</script>


<style scoped lang="scss">
@import "../style/common.scss";
.page-container{
  width: 100%;
  padding-bottom: 150rpx;
  //min-height: 100vh;
  //background-color: #ffffff;
}
.title-btn-receptacle{
  padding: 0 32rpx;
  position: fixed;
  left: 0;
  z-index: 5;
  .item{
    padding: 18rpx 20rpx 17rpx;
    .black-line{
      width: 88rpx;
    }
  }
  .item:first-child{
    padding-left: 0;
  }
  .charge{
    color: #0080FF;
  }
  .repay{
    color: #D22C14;
  }
}
.content {
  margin-top: 100rpx;
  flex: 1;
  overflow: auto;
  padding: 30rpx;
}

.card {
  background: #fff;
  border-radius: 16rpx;
  padding: 0 30rpx;
}

.card-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 100rpx;
  border-bottom: 1px solid #f5f5f5;
}

.card-item:last-child {
  border-bottom: none;
}

.label {
  font-size: 14px;
  color: #666;
}

.value {
  font-size: 14px;
  color: #333;
}

.value-box {
  display: flex;
  align-items: center;
}

.status {
  font-size: 14px;
  color: #999;
  margin-left: 10rpx;
}

.link {
  font-size: 14px;
  color: #2979ff;
  margin-left: 20rpx;
}

.store {
  flex-direction: column;
  align-items: flex-start;
  padding: 30rpx 0;
}

.store-name {
  font-size: 16px;
  color: #333;
  font-weight: 500;
  margin-bottom: 16rpx;
}

.phone {
  font-size: 14px;
  color: #666;
  margin-bottom: 8rpx;
}

.address {
  font-size: 14px;
  color: #666;
}

.footer {
  flex-shrink: 0;
  padding: 30rpx;
}

.repay-btn {
  width: 100%;
  height: 88rpx;
  line-height: 88rpx;
  background: #2979ff;
  color: #fff;
  font-size: 16px;
  border-radius: 44rpx;
}
</style>
